import classNames from 'classnames';
import { useEffect } from 'react';
import { useMediaPredicate } from 'react-media-hook';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import { Page, PageWithPublicBar, PrivatePage } from './constant/Page';
import style from './App.module.scss';

import TopBar from './component/TopBar';
import Navbar from './component/Navbar';
import SideMenu from './component/SideMenu';
import Snackbar from './component/Snackbar';
import Loader from './component/Loader';
import ToastGroup from './component/ToastGroup';
import { MediaQuery } from './constant/Media';
import { RootState } from './redux/store';
import AppRoutes from './Routes';
import { getMyPushMsg } from 'src/service/sysConfigService'
import { openSnackbar } from './redux/uiSlice';
import { init, sysbase } from './service/appService';
const App = () => {

  const isBiggerThanSm = useMediaPredicate(MediaQuery.Sm);
  const location = useLocation();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { auth: { isLogin, accountInfo }, ui: { notification }, basedata: { baseDataInfo } } = useSelector((state: RootState) => state);
  const isPrivate = PrivatePage.find((value) => location.pathname.startsWith(value)) !== undefined;


  // useEffect(() => {
  //   emitter.on('auth-expired', () => navigate(Page.SignIn));
  //   emitter.on('force-redirect', (path: Page) => navigate(path));
  //   emitter.on('force-tfa-process', () => navigate(Page.EnableTfa));
  // }, []);

  useEffect(() => {
    sysbase().catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    if (isLogin) {
      init().catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));

    };
  }, [isLogin]);

  useEffect(() => {
    let timerNotification: NodeJS.Timer;
    let timerDemand: NodeJS.Timer;
    if (isLogin && accountInfo?.FID) {
      const token = localStorage.getItem("token")
      getMyPushMsg({ FUserID: accountInfo?.FID, token: token })
      timerNotification = setInterval(() => {
        getMyPushMsg({ FUserID: accountInfo?.FID, token: token })
      }, 10 * 1000);

      // loadDemand();
      // timerDemand = setInterval(loadDemand, 60 * 1000);
    }
    return () => {
      clearInterval(timerNotification);
      clearInterval(timerDemand);
    };
  }, [isLogin, accountInfo]);

  const customRoutes = () => {
    if (isPrivate && isLogin)
      return (
        <>
          <TopBar />
          <div className={style.private}>
            {isBiggerThanSm ? <SideMenu hasTopBar={baseDataInfo?.FTopMsg != null} /> : <Navbar />}
            <div
              className={classNames(style.content, {
                [style.hasTopBar]: baseDataInfo?.FTopMsg != null,
              })}
            >
              <AppRoutes />
            </div>
          </div>
        </>
      );

    // public pages
    return (
      <div className={style.public}>
        <div>
          <AppRoutes />
        </div>
      </div>
    );

  };

  return (
    <>
      {customRoutes()}
      <ToastGroup content={notification} />
      <Loader />
      <Snackbar />
      {/* <PinnedNotice /> */}
    </>
  );
};

export default App;
